<template>
  <!-- 编辑对话框 -->
  <el-dialog
    title="编 辑 接 口"
    :visible.sync="showEditDialog"
    width="90%"
    :before-close="handleEditClose">

    <el-row>
        <!-- URL编辑 -->
        <el-col :span="24">
          <el-input placeholder="请输入请求URL地址" v-model="url" class="input-with-select">
            <el-select v-model="method" slot="prepend" style="width:80px">
              <el-option label="POST" value="POST"></el-option>
              <el-option label="GET" value="GET"></el-option>
            </el-select>
          </el-input>
        </el-col>

        <el-col :span="24">

          <!-- 是否拦截接口 -->
          <el-col :md="8" :sm="8" :xs="24" style="margin-top:30px;text-align:center">
            <el-radio-group v-model="intercept">
              <el-radio :label="0">关闭拦截</el-radio>
              <el-radio :label="1">启用拦截</el-radio>
            </el-radio-group>
          </el-col>

          <!-- 是否覆盖参数 -->
          <el-col :md="8" :sm="8" :xs="24" style="margin-top:30px;text-align:center">
            <el-checkbox-group v-model="optionFlags">
              <el-checkbox label="matchParam">入参匹配</el-checkbox>
              <el-checkbox label="coverResp">响应覆盖</el-checkbox>
            </el-checkbox-group>
          </el-col>

          <!-- 定制响应时间 -->
          <el-col :md="8" :sm="8" :xs="24" style="margin-top:20px;text-align:left">
            <el-input style="max-width:100%"
              placeholder="自定响应超时，默认无"
              size="tiny"
              prefix-icon="el-icon-time"
              v-model="respTimeout">
              <template slot="append">毫秒</template>
            </el-input>
          </el-col>
        </el-col>

        <el-col :span="24" style="margin-top:20px;text-align:left">
          <el-collapse v-model="collapse_name" @change="handleChange">

            <!-- URL入参配置 -->
            <el-collapse-item name="req_url_setup">
              <template slot="title"><h2 style="color:#2c3e50">地址参数匹配规则</h2></template>
              <el-col :span="24">
                <el-col :md="6" :sm="8" :xs="16" style="margin-top:30px;">
                  <el-input v-model="url_param_name" placeholder="URL参数名"></el-input>
                </el-col>
                <el-col :md="3" :sm="4" :xs="8" style="margin-top:30px;text-align:center">
                  <el-select
                    style="width:90%"
                    v-model="url_param_opt">
                    <el-option value='<' label="<"/>
                    <el-option value='>' label=">"/>
                    <el-option value='=' label="="/>
                    <el-option value='!=' label="!="/>
                    <el-option value='<=' label="<="/>
                    <el-option value='>=' label=">="/>
                  </el-select>
                </el-col>
                <el-col :md="6" :sm="8" :xs="16" style="margin-top:30px;">
                  <el-input v-model="url_param_value" placeholder="URL参数值"></el-input>
                </el-col>
                <el-col :md="3" :sm="4" :xs="8" style="margin-top:30px;text-align:center">
                  <el-button style="width:90%" type="primary" @click="onParamRuleAdd">添加</el-button>
                </el-col>
              </el-col>
              <el-tag
                v-for="rule in urlRules"
                :key="rule.name"
                style="margin-right:15px;margin-top:15px"
                @close="handleUrlRuleClose(rule)"
                closable>
                {{rule.name}} {{rule.opt}} {{rule.value}}
              </el-tag>
              <el-col :span="24" style="height: 50px;">
              </el-col>
            </el-collapse-item>

            <!-- 入参Body配置 -->
            <el-collapse-item name="req_body_setup">
              <template slot="title"><h2 style="color:#2c3e50">表单参数匹配规则</h2></template>
              <el-col :span="24">
                <el-col :md="6" :sm="8" :xs="16" style="margin-top:30px;">
                  <el-input v-model="url_body_name" placeholder="表单参数名"></el-input>
                </el-col>
                <el-col :md="3" :sm="4" :xs="8" style="margin-top:30px;text-align:center">
                  <el-select
                    style="width:90%"
                    v-model="url_body_opt">
                    <el-option value='REGX' label="REGX"/>
                    <el-option value='JSON' label="JSON"/>
                  </el-select>
                </el-col>
                <el-col :md="6" :sm="8" :xs="16" style="margin-top:30px;">
                  <el-input v-model="url_body_value" placeholder="匹配表达式"></el-input>
                </el-col>
                <el-col :md="3" :sm="4" :xs="8" style="margin-top:30px;text-align:center">
                  <el-button style="width:90%" type="primary" @click="onBodyRuleAdd">添加</el-button>
                </el-col>
              </el-col>
              <el-tag
                v-for="rule in bodyRules"
                :key="rule.name"
                style="margin-right:15px;margin-top:15px"
                @close="handleBodyRuleClose(rule)"
                closable>
                {{rule.name}} {{rule.opt}} {{rule.value}}
              </el-tag>
              <el-col :span="24" style="height: 50px;">
              </el-col>
            </el-collapse-item>
            <!-- 出参配置 -->
            <el-collapse-item name="resp_body_setup">
              <template slot="title"><h2 style="color:#2c3e50">出参响应内容覆盖</h2></template>
              <el-col :span="24">
                <el-col :md="24" :sm="24" :xs="24" style="margin-top:30px;text-align:left">
                  <el-radio-group v-model="overrideRespType">
                    <el-radio :label="0">TEXT/PLAIN</el-radio>
                    <el-radio :label="1">TEXT/HTML</el-radio>
                  </el-radio-group>
                </el-col>
                <el-input
                  style="margin-top:30px"
                  type="textarea"
                  :rows="20"
                  placeholder="请输入要覆盖的BODY响应结构"
                  v-model="overrideRespJson">
                </el-input>
              </el-col>
              <el-col :span="24" style="height: 50px;">
              </el-col>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSave">保 存</el-button>
    </span>
  </el-dialog>
</template>

<style>
</style>

<script>
export default {
  data () {
    return {
      showEditDialog: false,
      deviceId: '',
      methodId: '',
      url: '',
      time: 0,
      method: 'POST',
      intercept: 0,
      optionFlags: [],
      respTimeout: '',
      collapse_name: 'req_url_setup',
      ruleReqJson: '',
      overrideRespType: 0,
      overrideRespJson: '',
      url_param_name: '',
      url_param_opt: '=',
      url_param_value: '',
      url_body_name: '',
      url_body_opt: 'REGX',
      url_body_value: '',
      caSelect: '0',
      caList: [],
      urlRules: [],
      bodyRules: [

      ]
    }
  },
  methods: {
    openEdit (deviceId, methodId) {
      if (deviceId == null) {
        // 设备ID为空，忽略
        return
      }
      // 记录设备ID
      this.deviceId = deviceId
      if (methodId == null) {
        // 没有方法ID，新建
        this.methodId = ''
        this.newEdit(deviceId)
      } else {
        // 有方法ID，编辑
        this.methodId = methodId
        this.changeEdit(deviceId, methodId)
      }
      // 显示对话框
      this.showEditDialog = true
    },
    newEdit (deviceId) {
      this.url = ''
      this.method = 'POST'
      this.intercept = 0
      this.optionFlags = []
      this.respTimeout = ''
      this.ruleReqJson = ''
      this.overrideRespType = 0
      this.overrideRespJson = ''
      this.collapse_name = 'req_url_setup'
      this.url_param_name = ''
      this.url_param_value = ''
      this.url_param_opt = '='
      this.url_body_name = ''
      this.url_body_opt = 'REGX'
      this.url_body_value = ''
      this.urlRules = []
      this.bodyRules = []
    },
    changeEdit (deviceId, methodId) {
      this.$http.get('/func/loadMethodDetail', {
        params: {
          deviceID: deviceId,
          methodID: methodId
        }
      })
        .then((res) => {
          if (res.status === 200) {
            this.url = res.body.name
            this.method = res.body.method
            this.time = res.body.time
            this.intercept = res.body.intercept ? 1 : 0
            this.optionFlags = []
            if (res.body.matchParam) {
              this.optionFlags.push('matchParam')
            }
            if (res.body.coverResp) {
              this.optionFlags.push('coverResp')
            }
            this.respTimeout = res.body.respTimeout
            this.ruleReqJson = res.body.ruleReqJson
            this.overrideRespType = res.body.overrideRespType
            this.overrideRespJson = res.body.overrideRespJson
            this.collapse_name = 'req_url_setup'
            this.url_param_name = ''
            this.url_param_value = ''
            this.url_param_opt = '='
            this.url_body_name = ''
            this.url_body_opt = 'REGX'
            this.url_body_value = ''
            this.urlRules = res.body.urlRules
            this.bodyRules = res.body.bodyRules
          }
        })
    },
    onSave () {
      if (this.url === '' || this.url === null) {
        this.$notify({
          message: '地址不可为空！',
          type: 'warning'
        })
        return
      }
      var successCallback = (resp) => {
        if (resp.body.code !== 0) {
          // 请求失败
          this.$notify({
            message: resp.body.msg,
            type: 'warning'
          })
        } else {
          this.$notify({
            message: '保存成功',
            type: 'success'
          })
          // 请求成功
          this.showEditDialog = false
          // 刷新
          this.$emit('refreshRecord')
        }
      }
      var param = {
        id: this.methodId,
        time: this.time,
        name: this.url,
        method: this.method,
        intercept: this.intercept === 1,
        matchParam: this.optionFlags.indexOf('matchParam') >= 0,
        coverResp: this.optionFlags.indexOf('coverResp') >= 0,
        respTimeout: this.respTimeout,
        ruleReqJson: this.ruleReqJson,
        overrideRespType: this.overrideRespType,
        overrideRespJson: this.overrideRespJson,
        UrlRules: this.urlRules,
        BodyRules: this.bodyRules
      }
      this.$http.post('/func/updateMethod', param, {
        params: {
          deviceId: this.deviceId
        },
        emulateJSON: false
      }).then(successCallback)
    },
    // 编辑完成回调
    handleEditClose (done) {
      this.$confirm('确认关闭且不保存？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 新增URL参数规则
    onParamRuleAdd () {
      this.urlRules.push({
        name: this.url_param_name,
        opt: this.url_param_opt,
        value: this.url_param_value
      })
    },
    onBodyRuleAdd () {
      this.bodyRules.push({
        name: this.url_body_name,
        opt: this.url_body_opt,
        value: this.url_body_value
      })
    },
    // 移除URL参数规则
    handleUrlRuleClose (rule) {
      var index = this.urlRules.indexOf(rule)
      if (index > -1) {
        this.urlRules.splice(index, 1)
      }
    },
    handleBodyRuleClose (rule) {
      var index = this.bodyRules.indexOf(rule)
      if (index > -1) {
        this.bodyRules.splice(index, 1)
      }
    }
  }
}
</script>
